<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<title></title>
		<style>
			* {
				user-select: none;
			}

			button {
				width: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<label v-for="item in likeList">
				<input type="checkbox" :value="item.id" v-model="likeArr" />
				{{item.showValue}}
			</label>
			<br />
			<button @click="setall">全选</button>
			<button @click="counterSelection">反选</button>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				likeArr: [], //用户选择的数组
				likeList: [ //所有选项的数组
					{"id": 1,"showValue": "唱"},
					{"id": 2,"showValue": "跳"},
					{"id": 3,"showValue": "rap"},
					{"id": 4,"showValue": "篮球"},
					{"id": 5,"showValue": "music"},
					{"id": 6,"showValue": "只因你太美"}
				]
			},
			methods: {
				setall() {//全选
					for (let i = 0; i < this.likeList.length; i++) { // 获取所有likeList数组里的id数据
						this.likeArr.push(this.likeList[i].id)
					}
				},
				counterSelection() {//反选
					// for (let i = 0; i < this.likeList.length; i++) { // 遍历likeList数组里的数据
					// 	if (this.likeArr.indexOf(this.likeList[i].id) >= 0) { // .indexOf()首次出现的位置
					// 		this.likeArr.splice(this.likeArr.indexOf(this.likeList[i].id), 1) // 有就删除
					// 	} else {
					// 		this.likeArr.push(this.likeList[i].id) // 没有就加
					// 	}
					// }
					
					let likeListTemp = []
					for (let i = 0; i < this.likeList.length; i++) {
						likeListTemp.push(this.likeList[i].id) // 获取likeList数组里的id数据
					}
					likeListTemp = likeListTemp.filter(item => !this.likeArr.includes(item)) // 过滤
					this.likeArr = likeListTemp
				}
			}
		})
	</script>
</html>